<template>
  <view class="home flex column">
    <u-navbar :title="title" :title-bold="true" back-icon-color="#333333" title-color="#000">
      <view slot="right" class="navbar-right">
        <image src="/static/image/screen.svg" @click="clickBtn" class="navbar-right--icon" />
      </view>
    </u-navbar>
    <!-- 搜索框 -->
    <view class="search">
      <u-search
        placeholder="请输入姓名"
        v-model="filternameVal"
        shape="square"
        bg-color="#E5EAE8"
        height="80"
        :show-action="true"
        :animation="true"
        :input-style="{ marginLeft: '20rpx' }"
        :search-icon="searchSrc"
        placeholder-color="#999999"
        :action-style="{
          color: '#369164',
          fontSize: '14px',
          fontWeight: '400',
        }"
        @search="handleSearch"
        @custom="handleSearch"
        @change="handleSearch"
      ></u-search>
    </view>
    <!-- 列表 -->
    <scroll-view
      :scroll-y="true"
      class="container item one"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      @scrolltolower="onScrollToLower"
    >
      <view class="container-body">
        <template v-if="showList && showList.length">
          <u-card
            class="card"
            :border="false"
            box-shadow="0px 0px 8px #ddd6d6"
            :body-style="{ padding: '0 30rpx' }"
            :head-style="{ padding: '20rpx 30rpx 10rpx' }"
            :head-border-bottom="false"
            :foot-border-top="false"
            v-for="(item, index) in showList"
            :key="index"
            @click="goto(item)"
          >
            <view slot="head">
              <view class="card-row u-flex u-row-between">
                <view class="card-row-title t-title f-bold">
                  {{
                  item.name
                  }}
                </view>
              </view>
            </view>
            <view slot="body">
              <view class="card-row u-flex u-row-between u-p-t-10 u-p-b-10">
                <view class="card-row-title t-section">
                  {{
                  item.work_type
                  }}
                </view>
                <view class="tag" v-if="item.area_name">
                  <text class="t-deep-green">{{ item.area_name }}</text>
                </view>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      searchData: {
        status: '',
        pageSize: 20,
        pageNumber: 1
      },
      filternameVal: '',
      search: {
        mineNo: ''
      },
      type: '',
      index: '',
      searchSrc: require('@/static/image/search_icon.svg'),
      title: '',
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: 'loading',
      list: [],
      showList: [],
      filterList: ''
    }
  },
  mounted() {
    uni.$on('handClickSingleScreen', res => {
      this.searchData.status = res.status
      this.getData()
    })
    this.getData()
  },
  destroyed() {
    // 清除监听keyword
    uni.$off('handClickSingleScreen')
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.showList = []
      this.searchData.pageNumber = 1
      this.status = 'loading'
      this.showEmpty = false
    },
    goto(data) {
      let title = this.title
      uni.setStorageSync('trajectoryData', data)
      uni.navigateTo({
        url: `./trajectory?title=${title}`
      })
    },
    clickBtn() {
      uni.navigateTo({
        url: `./screenSingle?form=${JSON.stringify(this.searchData)}`
      })
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/mobile/environmentMonitor/ryssDataList', this.search)
      if (res) {
        switch (this.type) {
          case '1':
            if (res.body.ryssCount.allList) {
              this.list = res.body.ryssCount.allList
            }
            break
          case '2':
            if (res.body.ryssCount.leaderList) {
              this.list = res.body.ryssCount.leaderList
            }
            break
          case '3':
            if (res.body.ryssCount.specialList) {
              this.list = res.body.ryssCount.specialList
            }
            break
          case '4':
            if (res.body.ryssCount.faceSuccessList) {
              this.list = res.body.ryssCount.faceSuccessList
            }
            break
          case '5':
            if (res.body.ryssCount.faceErrorList) {
              this.list = res.body.ryssCount.faceErrorList
            }
            break
          case '6':
            if (res.body.ryssData[this.index].details) {
              this.list = res.body.ryssData[this.index].details
            }
            break
          default:
            break
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
        this.showData()
      }
    },
    handleSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.init()
        this.showData()
      }, 300)
    },
    filterNameList() {
      this.filterList = this.list.filter(item => {
        let matchName = true
        let matchType = false
        if (this.filternameVal) {
          matchName = item.name.indexOf(this.filternameVal) > -1
        }
        if (this.searchData.status) {
          switch (this.searchData.status) {
            case '0':
              if (item.is_leader && item.is_leader == '1') {
                matchType = true
              }
              break
            case '1':
              if (item.is_spercial && item.is_spercial == '1') {
                matchType = true
              }
              break
            case '2':
              if (item.work_type && item.work_type == '安全员') {
                matchType = true
              }
              break
            case '3':
              if (item.work_type && item.work_type == '瓦检员') {
                matchType = true
              }
              break
            default:
              matchType = false
          }
        } else {
          matchType = true
        }
        return matchName && matchType
      })
    },
    showData() {
      this.filterNameList()
      let arr = this.filterList.slice(this.searchData.pageNumber * 20 - 20, this.searchData.pageNumber * 20)
      this.showList = this.searchData.pageNumber === 1 ? arr : this.showList.concat(arr)
      // 到底了
      if (arr.length < this.searchData.pageSize) {
        this.status = 'nomore'
      }
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.showData()
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.showData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  computed: {},
  onLoad(options) {
    const { id, name, index, mineNo } = options
    this.type = id
    this.title = name
    this.search.mineNo = mineNo
    if (index) {
      this.index = index
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .navbar-right {
    margin-right: 40rpx;
    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
  /* 搜索框 */
  .search {
    padding: 20rpx 28rpx;
  }
  .card {
    min-height: 126rpx;
    .card-row {
      .tag {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 10rpx 28rpx;
        border-top-left-radius: 20rpx;
        background: rgba(15, 100, 58, 0.3);
      }
    }
  }
}
</style>
